<template>
  <div>
    <div class="room-table">
      <h2>已开出</h2>
      <el-table
        :data="canCloseRoomList"
        border
        style="width: 100%">
        <el-table-column
          prop="roomNum"
          label="房间号"
          align="center"
          width="180">
        </el-table-column>
        <el-table-column
          prop="roomType"
          label="类型"
          align="center"
          :formatter="typeFormat"
          :filters="roomTypeFilterConfig"
          :filter-method="filterType"
          width="180">
        </el-table-column>
        <el-table-column
          prop="roomPrice"
          label="价格"
          align="center"
          width="180">
        </el-table-column>
        <el-table-column
            label="状态"
            align="center">
          <span>已开出</span>
        </el-table-column>
        <el-table-column  
          label="操作"
          align="center">
          <template slot-scope="scope">
            <el-button size="mini" :disabled="scope.row.state==1">开房</el-button>
            <el-button size="mini" @click="checkOut(scope.row)">退房</el-button>
            <el-button size="mini" @click="changeRoom(scope.row.roomNum,scope.row.roomId,scope.row.orderId)">换房</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="换房" :visible.sync="dialogFormVisible">
      <el-form :model="changeConfig" >
        <el-form-item :label="'从'+roomNum+'换到'" :label-width="formLabelWidth">
          <el-select v-model="changeConfig.changeRoomId" placeholder="请选择换房房号">
            <el-option v-for="(item,index) in changeConfig.canChangeRoomList" :key="index" :label=item.roomNum :value=item.roomId></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="sendChangeRoom">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog class="checkOutTable" title="退房" :visible.sync="checkOutVisible" width="60%">
      <h3>房间信息</h3>
      <el-table
        :data="getOrderInfo"
        border
        style="width: 100%">
        <el-table-column
          prop="orderId"
          label="订单号"
          align="center"
          width="100">
        </el-table-column>
        <el-table-column
          prop="totalPrice"
          label="总费用"
          align="center"
          width="100">
        </el-table-column>
        <el-table-column
          prop="inTime"
          label="入住时间"
          align="center"
          width="260">
        </el-table-column>
        <el-table-column
          prop="outTime"
          label="到期时间"
          align="center"
          width="260">
        </el-table-column>
        <el-table-column
          prop="userIdArr"
          label="入住人员名单"
          align="center"
          :formatter="userNameFormat"
          width="200">
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="checkOutVisible = false">取 消</el-button>
        <el-button type="primary" @click="sendCheckOutRoom">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script>
export default {
  name:'HomeRoomClose',
  data(){
    return {
      dialogFormVisible: false,   //换房时的弹框
      checkOutVisible:false,
      changeConfig: {     //换房时的表单
        canChangeRoomList:[],
        changeRoomId:'',
      },
      formLabelWidth: '120px', 
      roomNum:'',   //旧房间的房间号
      changeId:'',   //开房记录的id
      orderId:'',
      roomId:'',
    }
  },
  computed:{
    // 获取已开房间列表
    canCloseRoomList(){
      return this.$store.getters.getCanCloseRoomList || [];
    },
    // 获取房间类型名列表
    typeNameList(){
      return this.$store.getters.getTypeNameList || {};
    },
    // 获取仓库里的订单信息
    getOrderInfo(){
      return this.$store.getters.getOrderInfoByOrderId || [];
    },
    // 获取仓库用户列表数据
    getUserNameList(){
      return this.$store.getters.getUserNameList || [];
    },
    // 获取未开房间列表
    canChangeRoomList(){
      return this.$store.getters.getCanOpenRoomList || [];
    },
    // 获取筛选格式的类别列表[{text:...,value:...}]
    roomTypeFilterConfig(){
      return this.$store.getters.getTypeFilterConfig || [];
    }
  },
  mounted(){
    this.$store.dispatch('getStateZeroOrderList');
    console.log(typeof(this.getOrderInfo));
  },
  methods:{
    //简单的退房操作
    checkOut(room){
      this.$store.dispatch('getOrderInfo', {send:{orderId:room.orderId},type:0});
      this.checkOutVisible=true;
    },
    sendCheckOutRoom(){
      this.$store.dispatch('reqCloseRoom', {roomId:this.getOrderInfo[0].roomId, orderId:this.getOrderInfo[0].orderId});
      // 刷新房间列表
      setTimeout(()=>{this.$store.dispatch('getRoomListData')}, 500);
      this.checkOutVisible=false;

    },
    changeRoom(roomNum,id,orderId){   //弹框表单
      this.roomNum=roomNum;
      this.roomId=id;
      this.orderId=orderId;
      this.dialogFormVisible=true;
    },
    sendChangeRoom(){    //换房操作
      let config = {
        roomId:this.roomId,
        changeRoomId:this.changeConfig.changeRoomId,
        orderId:this.orderId,
      }
      this.$store.dispatch('changeRoom', config);
      // 刷新房间列表
      setTimeout(()=>{this.$store.dispatch('getRoomListData')}, 500);
      this.dialogFormVisible=false;
    },
    // 将类型号转换为类型显示
    typeFormat(row, column, cellValue){
      if (cellValue == null || cellValue == '') return '';
      const typeNameList = this.typeNameList;
      return typeNameList[parseInt(cellValue)];
    },
    // 将用户id转换为用户名
    userNameFormat(row, column, cellValue){
      if (cellValue == null || cellValue == '') return '';
      const userNameList = this.getUserNameList;
      let arr = cellValue.split(',');
      let nameList = '';
      for (let item of arr){
        if (nameList != ''){
          nameList += (','+userNameList[item]);
        }else{
          nameList += userNameList[item];
        }
      }
      return nameList;
    },
    // 类别筛选功能配置
    filterType(value, row, column) {
      return row.roomType === value;
    }
  },
  watch:{
    canChangeRoomList(){
      this.changeConfig.canChangeRoomList = this.canChangeRoomList;
    }
  }
}
</script>


<style lang="less" scoped>
  .el-dialog__body h3{
    margin-bottom: 15px;
  }
  .el-table {
    margin-bottom: 25px;
  }
</style>
